<template> 
    <div>
        <!-- 轮播图 -->
        <goodsImgsSlide :goodsImgsSlideData="goodsImgsSlideDatas"></goodsImgsSlide>  
        <!-- 详情部分 -->
        <goodsDetails @setPopupState="SetPopupState" :descriptionData="descriptionDatas" @jumpProductImage="SetJumpProductImage" @jumpProductInfo="SetJumpProductInfo" :productInfoData="productInfoDatas"></goodsDetails> 
        <!-- 底部固定部分 -->
        <goodsFoot @setPopupState="SetPopupState" :productInfoData="productInfoDatas"></goodsFoot> 
        <!-- 弹窗部分 -->
        <goodsSku @setSelectedSaleAttrTwo="SetSelectedSaleAttrTwo" @setSelectedSaleAttrOne="SetSelectedSaleAttrOne" :selectedSaleAttrTwo="selectedSaleAttrTwo" :selectedSaleAttrOne="selectedSaleAttrOne" :skuStockNum="skuStockNums" :goodsSkuData="productInfoDatas" @setPopupState="SetPopupState" :popupState="popupStates"></goodsSku>
        <!-- 返回顶部 -->
        <backToTop></backToTop>          
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import goodsImgsSlide from './goodsImgsSlide.vue'
import goodsDetails from './goodsDetails.vue'
import goodsFoot from './goodsFoot.vue'
import goodsSku from './goodsSku.vue'
import backToTop from '../../public/default/backToTop.vue'
export default {
    computed: {
        ...mapState({
            // goodsImgsSlide模块数据
            goodsImgsSlideDatas: function(state) {
                return state.goods.productInfo.galleryList
            },
            // goodsDetails模块数据
            // goodsFoot模块数据 
            // goodsSku模块数据
            productInfoDatas: function(state) {
                return state.goods.productInfo
            },
            // goodsDetails模块数据                  
            descriptionDatas: function(state) {
                return state.goods.description
            },  
            // 弹窗显示或隐藏的值 
            popupStates: function(state) {
                // 预防弹窗里的滚动条带动整个页面滚动
                if (state.goods.popupState) {
                    document.body.style.overflow = 'hidden'
                } else {
                    document.body.style.overflow = 'auto'
                }
                return state.goods.popupState                
            },
            // 规格列表的值
            selectedSaleAttrTwo: function(state) {
                return state.goods.selectedSaleAttr2
            },
            // 颜色列表的值
            selectedSaleAttrOne: function(state) {
                return state.goods.selectedSaleAttr1
            },  
            // 点击尺寸和颜色显示库存 
            skuStockNums: function(state) {
                return state.goods.skuStockNum                
            }                                                                         
        })
    },  
    mounted() {
        // 页面加载就调用该函数
        this.productInfoParams()
        this.descriptionParams()
    },    
    methods: {
        // 向url传参数
        productInfoParams() {
            // 这两个参数是从good.js中async setDescription函数传递过来的
            var goodsSn = this.$route.params.goodsSn
            var channelCode = this.$route.query.channelCode
            this.SetProductInfo(goodsSn, channelCode)         
        },
        // 向url传参数 
        descriptionParams() {  
            var goodsSn = this.$route.params.goodsSn
            var channelCode = this.$route.query.channelCode 
            this.SetDescription(goodsSn, channelCode)     
        },     
        ...mapActions({
            SetProductInfo: 'goods/setProductInfo', 
            SetDescription: 'goods/setDescription',           
            SetJumpProductImage: 'goods/setJumpProductImage',            
            SetJumpProductInfo: 'goods/setJumpProductInfo',            
            SetPopupState: 'goods/setPopupState',                    
            SetSelectedSaleAttrTwo: 'goods/setSelectedSaleAttr2',                    
            SetSelectedSaleAttrOne: 'goods/setSelectedSaleAttr1'                    
        })      
    },
    components: {
        goodsImgsSlide,
        goodsDetails,
        goodsFoot,
        goodsSku,
        backToTop
    }
}
</script>

<style>

</style>



